<template>
    <el-container  class="home-container">
        <el-header>
            <div style="margin-left: 15px">
                <!-- logo -->
                <img src="../assets/logo.jpg" width="61" height="56" style="border-radius: 10px" alt="">
                <!-- 顶部标题 -->
                <span>在线教育管理系统</span>
            </div>
            <el-dropdown :hide-on-click="false"  @command="handleCommand">
                <el-avatar :src="userinfo.headUrl"></el-avatar>
                <span style="font-weight: bolder;color: white;">{{userinfo.nickName}}</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">
                        <span class="el-icon-user-solid">  个人中心</span>
                    </el-dropdown-item>
                    <el-dropdown-item command="b">
                        <span class="el-icon-lock">  修改密码</span>
                    </el-dropdown-item>
                    <el-dropdown-item command="c">
                        <span class="el-icon-remove">  退出登录</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <!-- 侧边栏菜单 -->
                <el-menu
                        background-color="#333744"
                        :unique-opened="true"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                        >
                    <!-- 一级菜单 index就是跳转路径-->
                    <el-submenu :index="first.id" v-for="first in leftMenu">
                        <!-- 一级菜单模板 -->
                        <template slot="title">
                            <!-- 文本 -->
                            <span :class="first.icon" style="font-size: 15px;">&nbsp;&nbsp;{{first.name}}</span>
                        </template>
                        <!-- 二级子菜单 -->
                        <!-- 二级子菜单 -->
                        <el-menu-item :index="second.path" v-for="second in first.children">
                            <!-- 二级菜单模板 -->
                            <template slot="title">
                                <!-- 图标 -->
                                <!-- 文本 -->
                                <span :class="second.icon"  style="font-size: 15px;"  @click="showContent(second.path,second.name)">&nbsp;&nbsp;{{second.name}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!--标签页-->
                <el-tabs type="card" v-model="editableTabsValue" closable @tab-remove="removeTab">
                    <el-tab-pane
                            v-for="(item,index) in editableTabs"
                            :key="item.name"
                            :label="item.title"
                            :name="item.name"
                            :url="item.url"
                    >
                        <span slot="label"><i class="el-icon-date"></i> {{item.title}}</span>
                        <div style="height: 100%">
                            <keep-alive>
                                <!--视图渲染-->
                                <router-view v-if="item.title === editableTabsValue"/>
                            </keep-alive>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Main",
        data(){
            return {
                userinfo:{},
                leftMenu:[],
                editableTabsValue: '1',
                editableTabs: [{
                    title: '首页',
                    name: '1',
                    url: '/home'
                    //content: 'Tab 1 content'
                }],
            }
        },
        created() {
            this.getUserInfo();
            this.getLeftMenu();
        },
        methods:{
            //移除tabs
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            //点击左侧菜单
            //显示当前连接的内容
            showContent(url, menuName) {
                //alert(url+","+menuName);
                //直接调用添加页签页
                this.addTab(menuName, url);
            },
            //添加标签页
            addTab(targetName, url) { //targetName 页签页名称   url 对应的地址
                // debugger
                let newTabName = targetName;
                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签变量
                var isHaveTab = false;
                //循环所有页签页 判断当前点击标签页名称已经存在
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if (targetName === tab.title) {// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName = tab.title;
                    }
                });
                //如果不存在 添加一个
                if (!isHaveTab) {
                    this.editableTabs.push({
                        title: targetName,
                        name: newTabName,
                        url: url
                    });
                }
                //如果存在，直接让高亮
                this.editableTabsValue = newTabName;
            },
            //加载左侧菜单
            getLeftMenu(){
                this.$http.get("/system/permission/leftMenu").then(result=>{
                     this.leftMenu=result.data.data;
                })
            },
            //头像的下来框事件
            handleCommand(command){
                if(command=='a'){//个人中心

                }else if(command=='b'){//修改密码

                }else{//退出
                    this.$http.get("/system/user/logout").then(result=>{
                         if(result.data.code==200){
                             this.$message.success("退出成功");
                             sessionStorage.clear();
                             this.$router.push("/login")
                         }
                    })
                }
            },

            getUserInfo(){
                this.$http.get("/system/user/info").then(result=>{
                     if(result.data.code==200){
                         this.userinfo=result.data.data;
                     }
                })
            }
        }
    }
</script>

<style>
    html,body,#app{
        padding: 0px;
        margin: 0px;
        height: 100%;
    }
    .home-container{
        height: 100%;
    }
    .el-header {
        background-color: palegoldenrod;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;

    }

    .el-header > div {
        display: flex;
        align-items: center;

    }

    .el-header > div > span {
        margin-left: 15px;
    }

    .el-aside {
        background-color: #333744;

    }

    .el-aside > .el-menu {
        border-right: none;
        font-size: 12px;
    }
    .el-main{
        background-color: #f1f1f1;
    }



</style>
